import { ReactElement, useEffect, useState } from 'react'
import style from './index.module.less'
import BlockOne from './components/blockOne'
import BlockTwo from './components/blockTwo'
import BlockThree from './components/blockThree'
import BlockFour from './components/blockFour'
import Search, { formatCondition } from '@src/pages/admin/components/searchForm'
import { useLocation } from 'react-router-dom'
import { ConditionSchema } from '@src/components/schema/condition'
import qs from 'query-string'

function Main (): ReactElement {
  const l = useLocation()
  const [condition, setCondition] = useState<ConditionSchema[]>([])
  const [params, setParams] = useState<{[k: string]: any}>({})
  useEffect(() => {
    setCondition(formatCondition(qs.parse(qs.stringify(params))))
  }, [params])
  return (
    <div className={style.container}>
      <div className={style.search}>
        <Search params={params} setParams={setParams} unused={['caseno_desc', 'assign_datetime', 'begin_datetime']} />
      </div>
      <div className={style.block}>
        <BlockOne params={params} condition={condition} />
      </div>
      <div className={style.block}>
        <BlockTwo params={params} condition={condition} />
      </div>
      <div className={style.block}>
        <BlockThree params={params} condition={condition} />
      </div>
      <div className={style.block}>
        <BlockFour params={params} condition={condition} />
      </div>
    </div>
  )
}

export default Main
